<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/icon-font.css">
    <link rel="stylesheet" href="../css/info-list.css"/><!--资讯列表-->
    <link rel="stylesheet" href="../css/pop-ups.css"/><!--资讯列表-->
    <!--<link rel="stylesheet" href="../plugin/swipeslider/css/swipeslider.css">-->
    <link rel="stylesheet" href="../plugin/swiper/css/swiper.min.css">

    <link rel="stylesheet" href="../plugin/mescroll/css/mescroll.min.css">
    <!--固定引用结束,自定义引用添加在下面-->
    <title>数据</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>

        .data-head-wrap {
        }

        .data-head-img {
            width: 7.5rem;
            height: 4.48rem;
        }

        .data-head-img img {
            width: 100%;
            height: 100%;
        }

        .nav-bar-search {
            margin-left: .32rem;
            width: 6.86rem;
            padding: .12rem 0;
            color: rgba(34, 34, 34, 0.36);
        }

        .nav-bar-item {
            background: rgba(245, 245, 245, 1);
            border-radius: 4px;
            width: 100%;
        }

        .nav-bar-input {
            margin-left: .16rem;
            width: 100%;
            line-height: .4rem;
        }

        .nav-bar-search span {
            margin-left: .24rem;
            color: rgba(159, 159, 159, 1);
        }

        .nav-bar-search i {
            margin-right: .26rem;
        }

        .data-head-search {
            bottom: -0.42rem;
            left: 0.32rem;
            height: .84rem;
            width: 6.86rem;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
            border-radius: 2px;
        }

        .data-head-search span {
            margin-left: .24rem;
            color: rgba(183, 183, 183, 1);
        }

        .data-head-search i {
            margin-right: .26rem;
        }

        .data-head-input {
            margin-left: .16rem;
            width: 100%;
            color: rgba(34, 34, 34, 0.36);
        }

        .data-set-wrap {
            width: 100%;
            padding: .72rem .15rem .36rem .15rem;
            flex-wrap: wrap;
        }

        .data-set-box {
            width: 1.8rem;
            margin-top: .2rem;
            margin-bottom: .2rem;
        }

        .data-set-img {
            width: .68rem;
            height: .68rem;
            border-radius: .24rem;
        }

        .data-set-img img {
            width: .68rem;
            height: .68rem;
            border-radius: .24rem;
        }

        .data-set-title {
            margin-top: .1rem;
            height: .34rem;
            line-height: .34rem;
            color: rgba(34, 34, 34, 1);
        }

        .data-index-tablemodel {
            background: linear-gradient(180deg, rgba(234, 241, 255, 1), rgba(255, 255, 255, 1));
            height: .94rem;
            line-height: .94rem;
            padding: 0 .32rem;
        }

        .data-index-bg {
            right: .54rem;
            top: .16rem;
        }

        .data-index-bg img {
            width: 1.2rem;
            height: .62rem;
        }

        .data-index-tablewrap {
            background: rgba(255, 255, 255, 1);;
        }

        .data-index-tabletil {
            margin-bottom: .1rem;
            height: .44rem;
            line-height: .44rem;
            color: rgba(121, 156, 220, 1);
        }

        .data-index-tablebox {
            max-height: 110px;
            margin: 0 .32rem;
            padding-left: .28rem;
            padding-right: .28rem;
            padding-bottom: 15px;
            padding-top: 19px;
            background: rgba(243, 246, 251, 1);
        }

        .data-index-tableicon {
            left: 0;
            top: 0;
            width: .64rem;
            height: .3rem;
            line-height: .3rem;
            border-radius: .12rem 0;
            background: rgba(78, 126, 244, 1);
            color: rgba(255, 255, 255, 1);
        }

        .data-index-summary {
            color: rgba(34, 34, 34, 0.7);
            line-height: 19px;
        }

        .info-show-more {
            top: 57px;
            padding: 0 .02rem;
            right: 0;
            height: 19px;
            background: rgba(243, 246, 251, 1);
        }

        .info-show-more span {
            color: #4E7EF4;
            margin-left: .06rem;
        }

        .data-swips-wrap {
            width: 7.5rem;
            height: 4.8rem;
            overflow: hidden;
            margin-top: .28rem;
            margin-bottom: .2rem;
        }

        .index-data-charts {
            height: 4.4rem;
            width: 100%;
        }

        /*财报解读--开始*/
        .data-table-wrap {
            width: 6.86rem;
            height: 4.4rem;
            margin-left: 0.32rem;
        }

        .data-table-wrap img {
            width: 6.86rem;
            height: inherit;
        }

        .data-rechead-box {
            height: 1.14rem;
            padding: 0 .32rem;
            background: white;
        }

        .data-rechead-til {
            height: 1.14rem;
            line-height: 1.14rem;
            color: rgba(34, 34, 34, 1);
        }

        .data-rechead-more {
            height: .36rem;
            line-height: .36rem;
            color: rgba(34, 34, 34, 0.7);
        }

        .data-rechead-more span {
            margin-left: .12rem;
            color: rgba(153, 153, 153, 0.6);
        }

        .data-listhead-wrap {
            padding: 0 .32rem;
            background: white;
        }

        .data-listhead-name {
            width: 1.71rem;
            line-height: .28rem;
            color: rgba(34, 34, 34, 0.6);
            background: rgba(245, 245, 245, 1);
            padding: .2rem .1rem;
        }

        .data-list-wrap {
            padding: 0 .32rem;
            background: white;
        }

        .data-list-item {
            padding: .22rem .16rem .22rem .12rem;
            border-bottom: solid 1px #f6f6f6;
        }

        .data-list-name {
            width: 1.71rem;
            color: rgba(34, 34, 34, 1);
            line-height: .32rem;
        }

        .data-list-val {
            width: 1.71rem;
            color: rgba(34, 34, 34, 1);
            line-height: .32rem;
            padding-right: .2rem;
        }

        .data-list-item .active {
            color: rgba(236, 62, 51, 1);
        }

        .data-model-wrap {
            background: rgba(255, 255, 255, 1);
            padding: 0.7rem .32rem;
        }

        .data-model-item {
            width: 3.24rem;
            height: 1.48rem;
            background: rgba(243, 246, 251, 1);
            border-radius: 2px;
        }

        .data-model-title {
            height: 21px;
            color: rgba(34, 34, 34, 1);
            line-height: 21px;
            margin-top: .32rem;
            margin-left: .30rem;
        }

        .data-model-desc {
            height: 17px;
            color: rgba(135, 135, 135, 1);
            line-height: 17px;
            margin-top: .06rem;
            margin-left: .30rem;
        }

        .data-model-img {
            width: .66rem;
            height: .66rem;
            margin-top: .44rem;
            margin-right: .38rem;
        }

        .data-model-img img {
            width: .66rem;
            height: .66rem;
        }


        .data-model-bg {
            width: .76rem;
            height: .64rem;
            margin-top: .44rem;
            margin-right: .38rem;
        }

        .data-model-bg img {
            width: .76rem;
            height: .64rem;
        }

        /*财报解读--结束*/

        .summary {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-line-clamp: 4;
            text-overflow: ellipsis;
            white-space: initial;
            overflow: hidden;
        }

        .contact-sales-wrap {
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 9999;
        }

        .contact-sales-box {
            /*top: 0;*/
            /*left: 0;*/
            width: 5.96rem;
            height: 2.9rem;
            background: rgba(254, 255, 255, 1);
            border-radius: 8px;
            /*z-index: 9999;*/
        }

        .contact-sales-til {
            color: rgba(34, 34, 34, 1);
            line-height: 22px;
            margin-top: .36rem;
            text-align: center;
        }

        .contact-sales-phone {
            color: rgba(44, 104, 255, 1);
            line-height: 25px;
            margin-top: .22rem;
            text-align: center;
        }

        .contact-sales-btn {
            margin-top: .4rem;
            width: 100%;
            border: solid 1px rgba(228, 228, 228, 1);
            border-width: 1px 0 0 0;
        }

        .contact-sales-cancle {
            color: rgba(34, 34, 34, 1);
            line-height: 1rem;
            width: 2.92rem;
            height: 1rem;
            text-align: center;
        }

        .contact-sales-call {
            color: rgba(44, 104, 255, 1);
            line-height: 1rem;
            width: 2.92rem;
            height: 1rem;
            text-align: center;
            border: solid 1px rgba(228, 228, 228, 1);
            border-width: 0 0 0 1px;
        }


    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>

<div class="flex-column h-100-p">
    <div class="placeholder-top pos-f">
        <!--状态栏-->
        <div class="status-bar"></div>
        <!--标题栏-->
        <div class="nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="flex-row justify-content-between align-items-center nav-bar-search dis-n" onclick="goSearch()">
                <div class="flex-row align-items-center nav-bar-item">
                    <span class="iconfont iconsousuo-01 fs13"></span>
                    <div class="flex-row align-items-center nav-bar-input ff400 fs13" placeholder="请输入您感兴趣的内容">
                        请输入您感兴趣的内容
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="scoll-y flex-1 mescroll" id="mescroll">

        <div class="data-head-wrap pos-r">
            <div class="data-head-img">
                <img src="../images/data/head@3x.png" alt="">
            </div>
            <div class="flex-row justify-content-between align-items-center data-head-search pos-a"
                 onclick="goSearch()">
                <div class="flex-row align-items-center w-100-p">
                    <span class="iconfont iconsousuo-01 fs16"></span>
                    <div class="data-head-input fs14">请输入您感兴趣的内容</div>
                </div>
            </div>
        </div>

        <div class="flex-row data-set-wrap bg-white"></div>

        <!--热门数据-->
        <div class="flex-row data-index-tablemodel fs18 ff500 pos-r">
            <div>热门数据</div>
            <div class="data-index-bg pos-a"><img src="../images/data/sjlu@3x.png"></div>
        </div>
        <div class="data-index-tablewrap">
            <div class="flex-row justify-content-center data-index-tabletil fs16 ff500"></div>
            <div class="flex-column data-index-tablebox pos-r">
                <div class="flex-row justify-content-center data-index-tableicon pos-a fs10 ff600">点评</div>
                <div class="data-index-summary line5 fspx12 ff400 pos-r"></div>
            </div>

            <!--轮播图-->
            <div class="data-swips-wrap">
                <div id="full_feature" class="swipslider index-data-charts">
                    <div class="sw-slides flex-row swiper-wrapper index-data-charts"></div>
                    <div class="swiper-pagination" style="position: relative; top:5px"></div>
                </div>
            </div>
        </div>

        <!--热门数据-->
        <div class="flex-row justify-content-between align-items-center data-rechead-box mt10">
            <div class="data-rechead-til fs18 ff500">上市公司财报解读</div>
            <div class="flex-row justify-content-center align-items-center data-rechead-more fs13 ff400"
                 onclick="goMoreFr()">
                <div>更多</div>
                <span class="iconfont iconfanhui fs11"></span>
            </div>
        </div>
        <div class="flex-row justify-content-center data-listhead-wrap"></div>
        <div class="flex-column data-list-wrap"></div>

        <div class="flex-row data-model-wrap justify-content-between">
            <div class="flex-row justify-content-between data-model-item" onclick="goBusiness()">
                <div class="flex-column">
                    <div class="data-model-title fs15 ff500">业务介绍</div>
                    <div class="data-model-desc fs12 ff400">特色数据介绍</div>
                </div>
                <div class="data-model-img"><img src="../images/data/1@3x.png"></div>
            </div>
            <div class="flex-row justify-content-between data-model-item" onclick="goContactSales()">
                <div class="flex-column">
                    <div class="data-model-title fs15 ff500">联系销售</div>
                    <div class="data-model-desc fs12 ff400">专属客服服务</div>
                </div>
                <div class="data-model-bg"><img src="../images/data/2@3x.png"></div>
            </div>
        </div>
    </div>
</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../js/dict.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/checkJsBridge.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/api.js"></script>
<script src="../js/icon-font.js"></script>
<!--固定引用结束-->
<script src="../js/date.js"></script>
<script src="../js/dateConversion.js"></script>
<script src="../js/template.js"></script>
<!--<script src="../plugin/swipeslider/js/swipeslider.js"></script>-->
<script src="../plugin/swiper/js/swiper.min.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/table-list.js"></script>

<script src="../plugin/mescroll/js/mescroll.min.js"></script>
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>

  let meScroll
  let pm = {
    list: [],
    titleList: [],
    firstDesc: '',
    mySwiper: 0
  }

  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    //下拉刷新、滚动加载
    meScroll = Template.createNoScroll({
      id: 'mescroll', //区域ID
      loadImg: '../images/loading.gif',
      pageNum: 1,
      downCallback: reLoadPage, //下拉刷新入口
    })

    pageScroll()
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {
    getRotionChartList()
  }

  function reLoadPage() {
    if (pm.mySwiper !== 0) {
      pm.mySwiper.destroy()
    }

    //获取数据下的应用
    getApplicationData()

    //轮播图
    getRotionChartList()

    //上市公司财报解读
    getFinancialReportData()
  }

  //获取数据下的应用
  function getApplicationData() {
    Server.dataIndex.getApplicationData({
      channelCode: '4'
    }).then(function (data) {

      let htmlStr = ''
      $.each(data.list, function (i, item) {
        htmlStr +=
          '       <div class="flex-column align-items-center data-set-box" onclick="goChaildPage(\'' + item.pageUrl + '\',\'' + item.name + '\')">\n' +
          '            <div class="data-set-img">\n' +
          '                <img src="' + item.iconUrl + '" alt="">\n' +
          '            </div>\n' +
          '            <div class="data-set-title fs13 ff400">' + item.name + '</div>\n' +
          '        </div>'
      })
      $('.data-set-wrap').html(htmlStr)
    })
  }

  //获取轮播图数据
  function getRotionChartList() {
    Server.dataIndex.getRotionChartList({
      pagesize: 3
    }).then(function (data) {

      let htmlStr = ''
      pm.list = data.recommendList
      $.each(data.recommendList, function (i, item) {
        htmlStr +=
          '<div class="flex-row sw-slide swiper-slide">\n' +
          '   <div class="data-table-wrap"  id="chart_' + item.chartsCode + '" style="z-index: 1000000" >' +
          '   </div>' +
          '</div>'
        if (i === 0) {
          pm.firstDesc = item.reviews
        }
      })
      $('.sw-slides').html(htmlStr)

      $.each(data.recommendList, function (i, item) {
        qrySubTopicDataSet(item.chartsCode, i, data.recommendList.length)
      })

      pm.mySwiper = new Swiper('#full_feature', {
        // loop: true,
        speed: 3000,
        autoplay: true,
        // observer: true,
        // observeParents: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicMainBullets: 2,
          dynamicBullets: true,
          clickable: true
        },
        on: {
          slideChangeTransitionStart: function () {
            infoChange(this.realIndex)
          }
        },
      })
    })
  }

  //处理试读内容
  function infoChange(num) {
    $.each(pm.list, function (i, item) {
      if (i === num) {
        dealSummary(pm.titleList[num], item.reviews)
      }
    })

    $('.data-index-tabletil').html(pm.titleList[num])
  }

  //处理试读内容
  function dealSummary(title, summary) {
    $('.data-index-summary').html('<div>' + summary + '</div>')

    if ($('.data-index-summary').find('div').outerHeight() > 76) {
      $('.data-index-summary').append('<div class="flex-row info-show-more pos-a"><div>…</div><span onclick="showMore(\'' + title + '\', \'' + Utils.replaceAll(summary, '\n', '<br>') + '\')">展开</span></div>\n')
    }
  }

  //跟进图表编码查询图表信息
  function qrySubTopicDataSet(subtopicCode, flag, len) {
    Server.dataIndex.qrySubTopicDataSet({
      'data': [],
      'isFirstAccess': '1',
      'subtopicCode': subtopicCode,
    }).then(function (data) {

      //set title
      if (flag === 0) {
        //处理试读内容
        dealSummary(data.data.subtopicTitle, pm.firstDesc ? pm.firstDesc : '')

        $('.data-index-tabletil').html(data.data.subtopicTitle)
      }

      pm.titleList[flag] = data.data.subtopicTitle

      // 处理图表信息
      dealChart(data.data, '1')
    })
  }

  //获取上市公司财报解读数据
  function getFinancialReportData() {
    Server.dataIndex.getFinancialReportData({}).then(function (data) {

      let htmlStr
      $.each(data.appInancialReportList, function (i, item) {

        if (i === 0) {
          htmlStr =
            '            <div class="flex-row  align-items-center data-listhead-name fs11 ff400">' + item.industry + '</div>\n' +
            '            <div class="flex-row  align-items-center data-listhead-name fs11 ff400">' + item.industryData1 + '</div>\n' +
            '            <div class="flex-row  align-items-center data-listhead-name fs11 ff400">' + item.industryData2 + '</div>\n' +
            '            <div class="flex-row  align-items-center data-listhead-name fs11 ff400">' + item.industryData3 + '</div>'
          $('.data-listhead-wrap').html(htmlStr)
          htmlStr = ''
        } else if (i <= 10) {
          htmlStr +=
            '            <div class="flex-row justify-content-between data-list-item">\n' +
            '                <div class="data-list-name fs14 ff400">' + item.industry + '</div>\n' +
            '                <div class="flex-row justify-content-end align-items-center data-list-val fs14 ff600 active">' + item.industryData1 + '</div>\n' +
            '                <div class="flex-row justify-content-end align-items-center data-list-val fs14 ff600">' + item.industryData2 + '</div>\n' +
            '                <div class="flex-row justify-content-end align-items-center data-list-val fs14 ff600">' + item.industryData3 + '</div>\n' +
            '            </div>'
        }
        $('.data-list-wrap').html(htmlStr)
      })

      meScroll.endSuccess()
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  //跳转应用页面
  function goChaildPage(pageUrl) {
    if (pageUrl && pageUrl === 'native/index-info.html') {//走原生跳转
      jsBridge.openIndexPage({
        pageUrl: 'index-info.html',
        method: 'homePageIn',
        fcode: '004001'
      })
    } else {
      jsBridge.openWindow(pageUrl, {}, {noBar: false})
    }
  }

  //财报解读，更多
  function goMoreFr() {
    jsBridge.openWindow('html/data/financial-report.html', {}, {noBar: false})
  }

  //业务介绍
  function goBusiness() {
    jsBridge.openWindow('html/data/business.html', {}, {noBar: false})
  }

  function goSearch() {
    jsBridge.openWindow('html/search/index-search.html', {}, {noBar: false})
  }

  function showMore(name, introduction) {
    Template.bottomPop(name, introduction)
  }

  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop = 0
    if (scrollTop < 180) {
      currStop = scrollTop
      $('.center-bar').html('')
      $('.left-bar').css({
        'color': 'rgb(255,255,255)'
      })
      $('.nav-bar-search').hide()
    } else {
      currStop = 180
      $('.center-bar').html(pm.title)
      $('.left-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 180 + ')'
      })
      $('.nav-bar-search').show()
    }
    $('.placeholder-top').css({
      'background': 'rgba(255, 255, 255, ' + currStop / 180 + ')'
    })
  }

  /**
   * @param callback 翻页回调函数
   */
  function pageScroll() {
    $('.mescroll').scroll(function () {
      //需要特殊处理的滚动区域，需要放在scroller元素区域内
      let scrollTop = $(this).scrollTop()
      dealHead(scrollTop)
    })
  }

  function goContactSales() {
    let bg = document.createElement('div')
    $(bg).css({
      'position': 'fixed',
      'bottom': '0',
      'width': '100%',
      'height': '100%',
      'background-color': 'rgba(0,0,0,0.6)',
      'z-index': '9999'
    }).addClass('pop-ups-bg').click(function () {
      $('.contact-sales-wrap').remove()
      $('.pop-ups-bg').remove()
    })

    let tip = document.createElement('div')
    $(tip).addClass('contact-sales-wrap')
    $(tip).addClass('flex-row justify-content-center align-items-center')

    let phone = '(010) 8659 0160'
    let html =
      '            <div class="contact-sales-box bg-white">\n' +
      '                <div class="contact-sales-til ff500 fs16">客服热线</div>\n' +
      '                <div class="contact-sales-phone ff500 fs18">' + phone + '</div>\n' +
      '                <div class="flex-row justify-content-between contact-sales-btn">\n' +
      '                    <div class="contact-sales-cancle ff400 fs16"">取消</div>\n' +
      '                    <div class="contact-sales-call ff400 fs16">拨打</div>\n' +
      '                </div>\n' +
      '            </div>'

    $('body').append(bg)
    $(tip).append(html)
    $('.pop-ups-bg').append(tip)

    $('.contact-sales-cancle').click(function () {
      $('.contact-sales-wrap').remove()
      $('.pop-ups-bg').remove()
    })

    $('.contact-sales-call').click(function () {
      jsBridge.openCallPhone(phone)
    })
  }

</script>
</html>
